<template>
    <div class="wrap">
        <div class="head-btns">
            <el-button type="primary" @click="saveNewCourse" icon="el-icon-circle-plus-outline" size="small"
                       style="float: right;margin-right: 8%">新增课程
            </el-button>
        </div>
        <div class="courseCards">
            <el-col :span="6" v-for="(course, index) in courseList" :offset="index %3 === 0 ? 1 : 2">
                <el-card class="course-card" shadow="hover"
                         :body-style="{ padding: '0px'}">
                    <i class="el-icon-close" style="color: #b5bfd0;position: absolute;top: 2%;right: 2%"
                       @click="removeCourseById(course.id)"></i>
                    <el-image v-show="course.imgUrl==null" fit="contain" style="width: 100%;height: 195px">
                        <div slot="error"
                             style="width: 100%;height: 160px; font-size: 50px;color:gray;text-align:center;line-height: 160px;"
                             class="image-slot">
                            <div><i class="el-icon-picture-outline"></i></div>
                        </div>
                    </el-image>
                    <el-image style="width: 100%;height: 195px"
                              :src="course.imgUrl"
                              fit="fill" class="image" v-show="course.imgUrl!=null||course.imgUrl!=undefined">
                    </el-image>
                    <div style="padding: 14px;">
                        <span @click="test">{{course.name}}</span>
                        <span style="margin-left: 30px" @click="test">价格:{{course.price}}</span>
                        <span style="margin-left: 30px"@click="test">课时:{{course.courseTimes}}</span>
                        <div class="bottom clearfix">
                            <el-button type="plain" size="mini" icon="el-icon-shopping-cart-2" class="button"
                                       @click="saveNewOrder(course)" @updateSuccess="updateSuccess">订购
                            </el-button>
                            <el-button type="plain" size="mini" icon="el-icon-edit" class="button"
                                       @click="updateCourse(course)" @updateSuccess="updateSuccess">修改
                            </el-button>

                        </div>
                    </div>

                </el-card>
            </el-col>
        </div>
        <div class="block">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-size="6"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <NewCourse :saveNewCourseShow="saveNewCourseShow" @cancel="saveNewCourseShow=false"
                   @saveSuccess="saveSuccess"></NewCourse>
        <update-course :course="updateCourseData" :updateCourseShow="updateCourseShow" @cancel="updateCourseShow=false"
                       @updateSuccess="updateSuccess"/>
        <new-course-order :saveNewCourseOrderShow="saveNewCourseOrderShow" :courseOrder="newCourseOrder" @cancel="saveNewCourseOrderShow=false"/>


    </div>
</template>

<script>
    import NewCourse from "@/components/course/NewCourse";
    // import saveCourseOrder from "@/components/course/NewCourseOrder";
    import NewCourseOrder from "@/components/course/NewCourseOrder";
    import {getCourseByPage, removeCourseById} from '@/utils/apis/course'
    import UpdateCourse from "@/components/course/UpdateCourse";
    import {saveOrder} from "@/utils/apis/courseOrder"
    export default {
        name: "CourseList",
        components: {
            UpdateCourse,
            NewCourse,
            getCourseByPage,
            removeCourseById,
            NewCourseOrder,
            saveOrder
        },
        data() {
            return {
                current: 1,
                total: 0,
                courseList: [],
                saveNewCourseShow: false,
                updateCourseShow: false,
                updateCourseData: {},
                saveNewCourseOrderShow: false,
                newCourseOrder:{}

            }
        },
        created() {
            this.initData()
        },
        methods: {
            test() {
                console.log(this.courseList)
            },
            //初始化数据
            initData() {
                this.handleCurrentChange(1)
            },
            //页数切换
            handleCurrentChange(val) {
                const loading = this.$loading({
                    lock: true,
                    text: '更新数据.......',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0,0,0,0.7)'
                })
                this.current = val
                getCourseByPage(this.current, 6).then(res => {
                    this.updateCardData(res)
                    loading.close()
                })
            },
            //更新数据
            updateCardData(val) {
                const data = val.data.data
                this.total = data.total
                this.courseList = data.records
            },
            //添加新课程
            saveNewCourse() {
                this.saveNewCourseShow = true
            },
            //添加新订单
            saveNewOrder(course){
                this.saveNewCourseOrderShow = true
                this.newCourseOrder = JSON.parse(JSON.stringify(course))
            },
            //修改课程信息
            updateCourse(course) {
                this.updateCourseShow = true
                this.updateCourseData = JSON.parse(JSON.stringify(course))
            },
            //添加课程成功的回调
            saveSuccess() {
                this.$nextTick(() => {
                    this.handleCurrentChange(this.current)
                })
            },
            //修改成功的回调
            updateSuccess() {
                this.$nextTick(() => {
                    this.handleCurrentChange(this.current)
                })
            },
            //删除课程数据
            removeCourseById(id) {
                console.log(id)
                this.$confirm('此课程的有关信息将被删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    await removeCourseById(id).then(() => {
                        this.$message.success('删除成功')
                        this.$nextTick(() => {
                            this.handleCurrentChange(this.current)
                            console.log(this.courseList)
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                })
            },
        }
    }
</script>

<style scoped>
    .wrap {
        height: 84vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .head-btns {
        width: 100%;
        height: 22px;
    }

    .courseCards {
        width: 90%;
        height: 580px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .course-card {
        width: 340px;
        height: 270px;
        border-radius: 10px;
        margin-top: 15px;
        position: relative;
    }

    .bottom {
        margin-top: 10px;
        line-height: 12px;
        display: flex;
        justify-content: space-between;
    }

    .button {
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .block {
        margin-top: 15px;
    }

    .el-icon-close {
        cursor: pointer;
        z-index: 2;
    }
</style>